{% extends 'layout.html' %}
{% block css %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
     <style>

     .eis-horizontal-steps .eis-form-steps {
         overflow: hidden;
         padding: 0;
         font-size: 0;
         position: relative
     }

     .eis-horizontal-steps .eis-form-steps .eis-form-step {
         display: inline-block;
         vertical-align: middle;
         width: 33.33333%;
         text-align: center
     }

     {#.eis-horizontal-steps .eis-form-steps .eis-step-progress {#}
     {#    height: 2px;#}
     {#    background: #4995fa;#}
     {#    width: 44%; /* 1是22%，2是44% */#}
     {#    margin-left: 4%;#}
     {#    position: absolute;#}
     {#    top: 15px;#}
     {#    left: 15px;#}
     {#}#}

     .eis-horizontal-steps .eis-form-steps .eis-step-head {
         width: 100%;
         position: relative
     }

     .eis-step-head .eis-step-icon {
         width: 30px;
         height: 30px;
         font-size: 16px;
         border-radius: 50%;
         position: relative;
         z-index: 1;
     }

     {#.is-finish .eis-step-icon {#}
     {#    border: 1px solid #4995fa#}
     {#}#}

     .eis-step-head .eis-step-icon .step-icon-txt {
         width: 26px;
         height: 26px;
         background: #ddd;
         border: 1px solid #ddd;
         -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
         border-radius: 50%;
         text-align: center;
         line-height: 26px;
         color: #fff;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         margin: auto
     }

     .is-finish .eis-step-icon .step-icon-txt {
         background: #4995fa;
         border: 1px solid #4995fa
     }

     .eis-horizontal-steps .eis-step-head .eis-step-line {
         position: absolute;
         background-color: #f1f1f1;
         height: 2px;
         top: 15px;
         left: 28px;
         right: -4px
     }

     .eis-horizontal-steps .eis-form-step .eis-step-main {
         font-size: 14px;
         padding: 6px 0 0;
         color: #666;
         text-align: left
     }

     .is-finish .eis-step-main {
         color: #3197fd
     }
     .hook {
         margin-top: 30px;
      }

 </style>

{% endblock %}

{% block content %}
    <div class="container">
        <h4>项目相关信息</h4>
        <table class="table table-bordered">
            <tr>
                <td>项目名称：{{ project_obj.title }}</td>
                <td>项目环境：{{ project_obj.get_env_display }}</td>
            </tr>
            <tr>
                <td colspan="2">项目的仓库地址：{{ project_obj.repo }}</td>
            </tr>
            <tr>
                <td colspan="2">项目的线上路径：{{ project_obj.path }}</td>
            </tr>
            <tr>
                <td colspan="2">
                    <div>关联的服务器:</div>
                    <ul>
                        {% for foo in project_obj.server.all %}
                            <li>{{ foo }}</li>
                        {% endfor %}

                    </ul>
                </td>
            </tr>
        </table>
        <form action="" method="post" novalidate>
            {% csrf_token %}

        <h4>基础配置</h4>
        <!--卡片的开始-->
        <div class="card" >
          <div class="card-body">
            <h5 class="card-title">基础配置<i class="bi bi-gear"></i></h5>
            <label >{{ form.tag.label }}</label>
                {{ form.tag }}
                <span>{{ form.tag.errors.0 }}</span>
          </div>
       </div>
        <!--卡片的结束-->

        <!--卡片的开始-->
        <div class="card" >
          <div class="card-body">
            <h5 class="card-title">发布的流程&钩子<i class="bi bi-wrench"></i></h5>
             <!--步骤条开始-->
                <div class="step-div">
                    <div class="eis-horizontal-steps">
                        <div class="eis-form-steps">

                            <div class="eis-form-step " style="width:10%;margin-left: 4%">
                                <div class="eis-step-head">
                                    <div class="eis-step-icon">
                                        <div class="step-icon-txt">1</div>
                                    </div>
                                    <div class="eis-step-line">
                                    </div>
                                </div>
                                <div class="eis-step-main">01 开始</div>
                            </div>

                            <div class="eis-form-step is-finish " style="width:12%">
                                <div class="eis-step-head">
                                    <div class="eis-step-icon">
                                        <div class="step-icon-txt">2</div>
                                    </div>
                                    <div class="eis-step-line">
                                    </div>
                                </div>
                                <div class="eis-step-main">02 下载前</div>
                            </div>

                            <div class="eis-form-step " style="width:12%">
                                <div class="eis-step-head">
                                    <div class="eis-step-icon">
                                        <div class="step-icon-txt">3</div>
                                    </div>
                                    <div class="eis-step-line">
                                    </div>
                                </div>
                                <div class="eis-step-main">03 下载代码</div>
                            </div>

{#                            <div class="eis-form-step" style="width:12%">#}
{#                                <div class="eis-step-head">#}
{#                                    <div class="eis-step-icon">#}
{#                                        <div class="step-icon-txt">4</div>#}
{#                                    </div>#}
{#                                    <div class="eis-step-line">#}
{#                                    </div>#}
{#                                </div>#}
{#                                <div class="eis-step-main">04 下载后</div>#}
{#                            </div>#}

                            <div class="eis-form-step is-finish" style="width:12%">
                                <div class="eis-step-head">
                                    <div class="eis-step-icon">
                                        <div class="step-icon-txt">4</div>
                                    </div>
                                    <div class="eis-step-line">
                                    </div>
                                </div>
                                <div class="eis-step-main">04 下载后</div>
                            </div>

                            <div class="eis-form-step" style="width:12%">
                                <div class="eis-step-head">
                                    <div class="eis-step-icon">
                                        <div class="step-icon-txt">5</div>
                                    </div>
                                    <div class="eis-step-line">
                                    </div>
                                </div>
                                <div class="eis-step-main">05 本地打包</div>
                            </div>

                            <div class="eis-form-step" style="width:10%">
                                <div class="eis-step-head">
                                    <div class="eis-step-icon">
                                        <div class="step-icon-txt">6</div>
                                    </div>
                                    <div class="eis-step-line">
                                    </div>
                                </div>
                                <div class="eis-step-main">06 上传代码</div>
                            </div>

                            <div class="eis-form-step is-finish" style="width:10%">
                                <div class="eis-step-head">
                                    <div class="eis-step-icon">
                                        <div class="step-icon-txt">7</div>
                                    </div>
                                    <div class="eis-step-line">
                                    </div>
                                </div>
                                <div class="eis-step-main">07 发布前</div>
                            </div>

                            <div class="eis-form-step" style="width:10%">
                                <div class="eis-step-head">
                                    <div class="eis-step-icon">
                                        <div class="step-icon-txt">8</div>
                                    </div>
                                    <div class="eis-step-line">
                                    </div>
                                </div>
                                <div class="eis-step-main">08 发布</div>
                            </div>



                            <div class="eis-form-step is-finish" style="width:4%">
                                <div class="eis-step-head">
                                    <div class="eis-step-icon">
                                        <div class="step-icon-txt">9</div>
                                    </div>
                                </div>
                                <div class="eis-step-main">发布后</div>
                            </div>

{#                            <div class="eis-step-progress"></div>#}
                        </div>
                    </div>
                </div>
                <!--步骤条结束-->

{#            <label >{{ form.tag.label }}</label>#}
{#                {{ form.tag }}#}

              <div class="row hook">
                  <!--下载前钩子面板开始-->
                  <div class="col-md-6 hooks">
                    <div class="card" >
                      <div class="card-body">
                        <h5 class="card-title">02 下载前</h5>
                        <h6 class="card-subtitle mb-2 text-muted">script</h6>

                        <div class="form-group">
                            <div class="col-sm-12">
                                {{ form.before_download_select }}
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12">
                                {{ form.before_download_script }}
                                <span>{{ form.before_download_script.errors.0 }}</span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-3">
                                <div class="checkbox">
                                    <label >{{ form.before_download_template }}保存为模板</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                               {{ form.before_download_title }}
                                <span>{{ form.before_download_title.errors.0 }}</span>
                            </div>
                        </div>

{#                        {{ form.before_download_script }}#}
{#                        <span>{{ form.before_download_script.errors.0 }}</span>#}
                      </div>
                    </div>
                  </div>
                  <!--下载前钩子面板结束-->

                   <!--下载后钩子面板开始-->
                  <div class="col-md-6 hooks">
                      <div class="card" >
                          <div class="card-body">
                            <h5 class="card-title">04 下载后</h5>
                            <h6 class="card-subtitle mb-2 text-muted">script</h6>
{#                            {{ form.after_download_script }}#}
{#                            <span>{{ form.after_download_script.errors.0 }}</span>#}
                              <div class="form-group">
                            <div class="col-sm-12">
                                {{ form.after_download_select }}
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12">
                                {{ form.after_download_script }}
                                <span>{{ form.after_download_script.errors.0 }}</span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-3">
                                <div class="checkbox">
                                    <label >{{ form.after_download_template }}保存为模板</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                               {{ form.after_download_title }}
                                <span>{{ form.after_download_title.errors.0 }}</span>
                            </div>
                        </div>
                          </div>
                      </div>
                  </div>
                   <!--下载后钩子面板结束-->

                  <!--发布前钩子面板开始-->
                  <div class="col-md-6 hooks" style="margin-top: 30px">
                      <div class="card" >
                          <div class="card-body">
                            <h5 class="card-title">07 发布前</h5>
                            <h6 class="card-subtitle mb-2 text-muted">script</h6>
                               <div class="form-group">
                            <div class="col-sm-12">
                                {{ form.before_deploy_select }}
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12">
                                {{ form.before_deploy_script }}
                                <span>{{ form.before_deploy_script.errors.0 }}</span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-3">
                                <div class="checkbox">
                                    <label >{{ form.before_deploy_template }}保存为模板</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                               {{ form.before_deploy_title }}
                                <span>{{ form.before_deploy_title.errors.0 }}</span>
                            </div>
                        </div>
{#                            {{ form.before_deploy_script }}#}
{#                            <span>{{ form.before_deploy_script.errors.0 }}</span>#}
                          </div>
                      </div>
                  </div>
                   <!--发布前钩子面板结束-->

                  <!--发布后钩子面板开始-->
                  <div class="col-md-6 hooks" style="margin-top: 30px">
                      <div class="card" >
                          <div class="card-body">
                            <h5 class="card-title">09 发布后</h5>
                            <h6 class="card-subtitle mb-2 text-muted">script</h6>
                               <div class="form-group">
                            <div class="col-sm-12">
                                {{ form.after_deploy_select }}
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12">
                                {{ form.after_deploy_script }}
                                <span>{{ form.after_deploy_script.errors.0 }}</span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-3">
                                <div class="checkbox">
                                    <label >{{ form.after_deploy_template }}保存为模板</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                               {{ form.after_deploy_title }}
                                <span>{{ form.after_deploy_title.errors.0 }}</span>
                            </div>
                        </div>
{#                            {{ form.after_deploy_script }}#}
{#                            <span>{{ form.after_deploy_script.errors.0 }}</span>#}
                          </div>
                      </div>
                  </div>
                   <!--发布后钩子面板开始-->

              </div>
          </div>
        </div>
            <input type="submit" value="提交" class="btn btn-info">
        </form>

    </div>


        <!--卡片的结束-->


{% endblock %}
{% block js %}
    <script>
        $(".hooks").find('select').change(function () {
            {#console.log($(this).val());#}
            let that =$(this);
            $.ajax({
                url:'/hooktemplate/detail/'+$(this).val()+'/',
                type:'get',
                dataType:'json',
                success:function (res) {
                    if(res.status){
                         {#console.log(res.data);#}
                         that.parent().parent().next().find('textarea').val(res.data);
                    }

                }
            })
        })
    </script>
{% endblock %}